<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
    <title>CSS Test: :nth-child selector and dynamically inserted elements</title>
    <style type="text/css">
    div div:nth-child(even)
    {
        color: red;
    }
</style>
</head>
<body onload="Test()">
    <p>The test passes if only DIV 2 is green and there is no red.</p>
      <div id="test">
          <div>DIV1</div>
          <div>DIV3</div>
      </div>
      <div id="testresult" style="color: blue">Running</div>
    <script type="text/javascript">

      function Test()
      {
          try
          {
            var parent = document.getElementById("test");
            var elems = parent.getElementsByTagName("div");
            var newElem = document.createElement("div");
            newElem.style.color = "green";
            parent.insertBefore(newElem, elems[1]);
            var txt = document.createTextNode("DIV2");
            newElem.appendChild(txt);

            var redValues = new Array("red", "#ff0000", "rgb(255, 0, 0)");
            var elem = document.getElementById("test");
            var val = getComputedStyle(elem.children[2], null).getPropertyValue("color");
            if (ArrayContains(redValues, val, false))
            {
                document.getElementById("testresult").innerHTML = "Fail";
                return;
            }
            else
            {
                document.getElementById("testresult").innerHTML = "Pass";
                return;
            }
          }catch(e){}

        document.getElementById("testresult").innerHTML = "Fail";

      }
      function ArrayContains(array, value, ci)
      {
          ci = ci == true ? true : false;
          for (var i = 0; i < array.length; i++)
          {
              if (ci && array[i].toLowerCase() == value.toLowerCase())
              {
                  return true;
              }
              else if (array[i] == value)
              {
                  return true;
              }
          }
          return false;
      }
    </script>
</body>
</html>
